<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>权限设置</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="css/check_box.css">
	<link rel="stylesheet" href="css/radio.css">
	<style>
		.checkbox-inline {
			width: calc(100% / 4.5);
		}

		.i-checks input:checked+i:before {
			top: 1px;
			left: 1px;
			width: 8px;
			height: 8px;
		}

		.i-checks>i {
			width: 12px;
			height: 12px;
		}

		.offer {
			width: 130px;
			height: 40px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
		}

		.return {
			width: 130px;
			height: 40px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 40px;
			margin-top: -40px;
			margin-left: 180px;
			font-size: 16px;
		}

		.labels {
			width: 70%;
			min-width: 600px;
			margin-top: -20px;
			margin-left: 110px;
		}

		.label {
			margin-top: 0;
		}

		.layui-input-block.true {
			padding-top: 13px;
			line-height: 15px;
		}

		.layui-input-block.true>input:not(:first-child) {
			margin-left: 20px;
		}

		[v-show] {
			display: none;
		}
	</style>
</head>

<body>
	<!-- 学校权限设置 -->
	<div class="layui-row" id="vue-root" style="margin-top: 50px;">
		<div class="layui-col-md6 layui-col-md-offset3">

			<!-- <div class="layui-form-item">
				<label class="layui-form-label">卡</label>

				<div class="labels">
					<label class="checkbox-inline i-checks">
						<input type="checkbox" v-model="limitCard">
						<i></i> 限制重复用卡
					</label>
				</div>
			</div> -->

			<div v-for="(item,index) in list" :key="index" v-if="some1(item)">
				<div class="layui-form-item">
					<label class="layui-form-label" style="font-weight: bold;font-size: 16px">{{item.name}}</label>
					<div class="layui-input-block true">

						<label class="checkbox-inline i-checks" style="margin:0 0 0 20px">
							<input type="checkbox" style="display: none" v-model="item.fold">
							{{item.fold?'展开':'折叠'}}
						</label>
						<label class="checkbox-inline i-checks" style="margin:0 0 0 20px">
							<input type="checkbox" style="display: none" v-model="item.all" @change="doAll(item)">
							{{item.all?'全不选':'全选'}}
						</label>
					</div>
				</div>

				<div class="layui-form-item" style="margin-left: 60px" v-for="(items,index) in item.list" :key="index"
					v-if="!item.fold&&some(parent[items.key])&&(isAgent||!items.agent)">
					<label class="layui-form-label">{{items.name}}</label>

					<div class="labels">
						<label class="checkbox-inline i-checks" v-for="(a,index) in items.allows" :key="index"
							v-if="parent[items.key]&&parent[items.key][index]">
							<input type="checkbox" v-model="items.allows[index]">
							<i></i> {{['查看','新增','修改','删除','导入','导出','进入校区','审批'][index]}}
						</label>
					</div>
				</div>
			</div>

			<div class="layui-form-item" style="margin-top: 40px;">
				<div class="layui-input-block">
					<input type="button" class="offer" value="确认" @click="submit">
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/auth_util.js"></script>
	<script src="/js/school_menu.js"></script>

	<script>
		var param = params();

		var isAgent = param.type == 'agent';
		var url = '/pc/' + (isAgent ? 'agent' : 'school') + '/auth/' + param.id;

		var app = new Vue({
			el: '#vue-root',
			data: {
				card: {},
				auth: {},
				list: schoollist,
				parent: {},
				isAgent: isAgent,
				limitCard: false
			},
			created: function () {
				axios.get(url).then(function (res) {
					var auth = res.data || {};
					var o = {};
					this.auth = auth;
					this.limitCard = auth.limitCard;
					this.list.forEach(function (it1) {
						it1.list.forEach(function (it) {
							it.allows = f(auth[it.key] || 0);
							o[it.key] = [true, true, true, true,true, true, true, true]; // f(o[key]);
							if (it.top) o[it.key] = f(it.top);
						});
					});
					this.parent = o;
				}.bind(this));
			},
			methods: {
				doAll: function (o) {
					o.list.forEach(function (it) {
						it.allows = [o.all, o.all, o.all, o.all,o.all, o.all, o.all, o.all];
					});
				},
				some: function (it) {
					return it && it.some(function (i) {
						return i;
					});
				},
				some1: function (it) {
					return it.list.some(function (it1) {
						return true;
					}.bind(this));
				},
				submit: function () {
					var o = {};
					var p = this.parent;
					this.list.forEach(function (it1) {
						it1.list.forEach(function (it) {
							o[it.key] = g(and(it.allows, p[it.key]));
						});
					});
					this.auth = o;
					this.auth.limitCard = !!this.limitCard;
					axios.post(url, this.auth).then(function (res) {
						alert('修改成功');
						history.back();
					});
				}
			},
		});
	</script>
</body>

</html>